<template>
  <page-layout :title="headContent.orderNo"
               :logo="logo"
               :show-breadcrumb="false">
    <yq-page-head-content ref="pageContent" slot="headerContent" :head-content="headContent" :head-content-columns="headContentColumns"/>
    <yq-page-head-extra ref="pageExtra" slot="extra" :head-content="headContent" :head-extra-columns="headExtraColumns"/>
    <a-divider style="margin: 1px"/>
    <a-divider style="margin: 1px"/>
    <!-- actions -->
    <template slot="action">
      <a-button-group style="margin-right: 4px;">
        <a-button @click="handleEdit(headContent)">编辑</a-button>
        <a-button>
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link">
              <a-icon type="ellipsis"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(headContent.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a-button>
      </a-button-group>
      <template>
        <a-button type="primary" @click="">变更状态</a-button>
      </template>

      <mm-purchase-order-modal ref="modalForm" @ok="modalFormOk"/>
    </template>
    <a-tabs type="card"  @change="callback">
      <a-tab-pane key="1" tab="采购明细">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <mm-purchase-order-detail-table ref="purchaseOrderDetailTable" :init-query-param="{pid: this.headContent.id}"/>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </page-layout>
</template>

<script>
  import {mixinDevice} from '@/utils/mixin.js'
  import PageLayout from '@/components/page/PageLayout'
  import {deleteAction, getAction} from "@/api/manage";
  import MmPurchaseOrderDetailTable from '../MmPurchaseOrderDetailTable'
  import MmPurchaseOrderModal from './MmPurchaseOrderModal'

  export default {
    name: "MmPurchaseRequisitionDetail",
    components: {
      PageLayout,
      MmPurchaseOrderModal,
      MmPurchaseOrderDetailTable,
    },
    mixins: [mixinDevice],
    created(){
    },
    data() {
      return {
        headContent: {},
        defaultActiveKey: '1',
        headContentColumns:[
          {
            title:'供应商',
            dataIndex: 'supplyId_dictText',
            len: 7,
          },
          {
            title:'采购员',
            dataIndex: 'buyer_dictText',
          },
          {
            title:'采购部门',
            dataIndex: 'buyerDept_dictText',
          },
          {
            title:'订单日期',
            dataIndex: 'orderDate',
          },
        ],
        headExtraColumns:[
          {
            title: '状态',
            dataIndex: 'mainStatus_dictText',
          },
          {
            title: '总金额',
            dataIndex: 'totalPrice',
            prefix: '￥',
          },
        ],
        url: {
          list: "/mm/purchaseOrder/detailPageList",
          edit: "/mm/purchaseOrder/edit",
          delete: "/mm/purchaseOrder/deleteLogic",
        },
        logo: require('@/views/ebc/assets/billNo.png'),
      }
    },
    methods: {
      edit(record) {
        this.headContent = Object.assign({},record,{id: record.pid});
      },
      handleEdit: function (record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleDelete: function (id) {
        if(!this.url.delete){
          this.$message.error("请设置url.delete属性!")
          return
        }
        var that = this;
        deleteAction(that.url.delete, {id: id}).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.$emit('detailDel');
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      callback(key){
      },
      modalFormOk: function () {
        // 刷新详情页
        this.detailFresh();
        // 详情页更新通知
        this.$emit('detailOk');
      },
      detailFresh(){
        let that = this;
        getAction(that.url.list,{pid : that.headContent.id}).then((res)=>{
          if(res.success){
            let record = (res.result.records)[0];
            if(record){
              this.headContent = Object.assign({},record,{id: record.pid});
            }
          }else{
            that.$message.warning(res.message);
          }
        })
      },
    },
  }
</script>

<style lang="less" scoped>
.detail-layout {
  margin-left: 2px;
}

.text {
  color: rgba(0, 0, 0, .45);
  text-align: center;
}

.contentText {
  color: rgba(0, 0, 0, .45);
  font-size: 13px;
}

.heading {
  color: rgba(0, 0, 0, .85);
  font-size: 20px;
  text-align: center;
}

.contentHeading {
  color: rgba(0, 0, 0, .85);
  font-size: 14px;
}

.no-data {
  color: rgba(0, 0, 0, .25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.mobile {
  .detail-layout {
    margin-left: unset;
  }

  .text {

  }

  .status-list {
    text-align: left;
  }

  .term {
    color: rgba(0,0,0,.85);
    display: table-cell;
    line-height: 20px;
    margin-right: 8px;
    padding-bottom: 16px;
    white-space: nowrap;

    &:after {
      content: ":";
      margin: 0 8px 0 2px;
      position: relative;
      top: -.5px;
    }
  }

  .content {
    color: rgba(0,0,0,.65);
    display: table-cell;
    line-height: 22px;
    padding-bottom: 16px;
    width: 100%;
  }

}
</style>